import { Chart } from "@antv/g2";
import React, { useEffect, useRef } from "react";

function index() {
  const chartRef = useRef(null);
  useEffect(() => {
    if (chartRef.current) {
      const chart = new Chart({
        container: chartRef.current,
        autoFit: true,
      });

      chart.coordinate({ type: "theta" });

      chart
        .interval()
        .data([
          { genre: "Sports", sold: 275 },
          { genre: "Strategy", sold: 115 },
          { genre: "Action", sold: 120 },
          { genre: "Shooter", sold: 350 },
          { genre: "Other", sold: 150 },
        ])
        .transform({ type: "stackY" })
        .encode("color", "genre")
        .encode("y", "sold")
        .animate("enter", { type: "waveIn", duration: 1000 });

      chart.render();

      // 清除图表实例
      return () => {
        chart.destroy();
      };
    }
  }, []);
  return <div ref={chartRef} style={{ width: "100%", height: "400px" }} />;
}

export default index;
